<template>
    <div>
        <div class="back-btn" @click="back">
            <div class="btn">返回</div>
        </div>
        <ul class="info-list">
            <li class="flex-box" @click="changePickStatus">
                <my-content
                    v-bind:params="sendTimeProps"
                ></my-content>
                <my-timePick 
                    v-show="timePickerStatus"
                    v-bind:params="timePickProps"
                    :hCb="hourChange"
                    :mCb="minChange"
                ></my-timePick>
            </li>
            <li class="flex-box p-tb8">
                <my-select
                    v-bind:params="aheadTimeProps"
                    :defaultSelectCb="defaultSelectCb"
                    v-bind:disabled="!isAdd"
                    :cb="changeDeedLine"
                >
                </my-select>
            </li>
            <li class="li-part">
                <div class="name h44">送餐星期</div>
                <div class="week-list clearfix">
                <div class="week-btn" v-for="item in week">
                    <p v-bind:class="item.isChecked?'active':'' "  @click="selectWeek(item.name)">{{item.name}}</p>
                </div>
                </div>
            </li>
        </ul>
        <div class="btn-part">
        <div v-if="isAdd" class="save-btn" @click="save">保存</div>
        <div v-else class="delete-btn" >删除</div>
        </div>
    </div>
</template>

<script>
    
    import Store from '@/store/Store.js'
    import TimePick from '@/components/TimePick'
    import Content from '@/components/Content'
    import Select from '@/components/Select'

    export default{
        data(){
            return{
                isAdd:true,
                id: '',
                store:Store.TakeOutSettingStore,
                timePickerStatus:false,
                timePickProps:{
                    hour: '12',
                    minutes: '00',
                },
                aheadOrderDeadline:30,
                aheadTimeProps:{
                    label:'提前点餐截止时间（分）',
                    subLabel:'设置了按天数点餐的，此设置无效',
                    data:[]
                },
                week:[],
                weekAry:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        },
        methods:{
            back(){ //返回
                this.$router.push({
                    path:'/time_list'
                })
            },
            init(){
                //提前点餐截止时间
                let aheadTimeAry = [];
                let i = 10;
                while (i <= 180) {
                    aheadTimeAry.push(i);
                    i += 5;
                }
                this.aheadTimeProps.data = aheadTimeAry;
                let {id} = this.$router.history.current.query //拿到url里的参数对象
                if (id === '') {
                this.weekAry.map((item) => { //组装星期对象
                        this.week.push({
                            name: item,
                            isChecked: true
                        });
                    });
                }else{
                    let sendMealTime = Store.TakeOutSettingStore.sendMealTime
                    
                    let obj = {};
                    sendMealTime.map((item) => {
                        if (item.id === id) {
                            obj = item;
                            console.log(obj)
                        }
                    });
                    
                    var arr = obj.deliveryDate.split("")
                    for(let i=0;i<arr.length;i++){
                        let isChecked = false; 
                        if(arr[i] != 0) {
                            isChecked = true; 
                        } 
                        this.week.push({
                            name: this.weekAry[i],
                            isChecked: isChecked
                        });
                    }
                    this.aheadOrderDeadline = obj.aheadOrderDeadline;
                    this.timePickProps.hour = obj.hour;
                    this.timePickProps.minutes = obj.minutes;
                    this.isAdd = false;
                    this.id = id;
                }
            },
            defaultSelectCb(item){ //select的默认选中项回调
                if(item != this.aheadOrderDeadline){
                    return false
                }
                if(item === this.aheadOrderDeadline){
                    return true
                } 
            },
            changePickStatus(){ //控制时间控件出现和隐藏
                if (this.isAdd) {
                    this.timePickerStatus = true;
                }
            },
            hourChange(h){ //小时回调
                this.timePickProps.hour = h
            },
            minChange(m){ //分钟回掉
                this.timePickProps.minutes = m
                this.timePickerStatus = false;
            },
            changeDeedLine(v){ //记录提前点餐截止时间
                this.aheadOrderDeadline = v
            },
            selectWeek(name) { //星期被点击的记录
                if (this.isAdd) {
                    let newWeek = this.week;
                    newWeek.map((item) => {
                        if (item.name === name) {
                        item.isChecked = !item.isChecked;
                        }
                    });
                    this.week = newWeek;
                }
            },
            save(){
                let sendMealTime = Store.TakeOutSettingStore.sendMealTime
                let weekAry = this.week, weekString = "", week = [];
                weekAry.map((item) => { //区分周几是未被选中的，用于判断
                    if (item.isChecked) {
                        weekString += '1';
                        week.push(item.name);
                    } else {
                        weekString += '0';
                    }
                });
                let t = new Date();
                let newTimeObj = { //组装对象
                    hour: this.timePickProps.hour,
                    minutes: this.timePickProps.minutes,
                    aheadOrderDeadline: this.aheadOrderDeadline,
                    deliveryDate: weekString,
                    deliveryDate2: week,
                    id: t.getTime().toString()
                };
                let isRepeat = false;
                sendMealTime.filter((item) => { // 摘选
                    if (item.hour === newTimeObj.hour && item.minutes === newTimeObj.minutes && item.deliveryDate === newTimeObj.deliveryDate) {
                        isRepeat = true;
                    }
                });
                if (isRepeat) {
                    alert('请勿添加重复的送餐时间');
                } else {
                    sendMealTime.push(newTimeObj);
                    Store.TakeOutSettingStore.sendMealTime = sendMealTime;
                    console.log(Store)
                    this.back();
                }
            }
        },
        created(){
            this.init()
        },
        computed:{
            sendTimeProps:function(){ //利用计算属性去监听小时和分钟的变化
                return{
                   label:'送餐时间',
                   value:`${this.timePickProps.hour}:${this.timePickProps.minutes}`
                }
            }
        },
        components:{
            'my-timePick':TimePick,
            'my-content':Content,
            'my-select':Select
        }
    }
</script>

<style lang="less" scoped>
    .info-list {
        margin: 62px 10px 20px;
        background: #fff;
        padding: 0 15px;
        border-radius: 4px;
    .p-tb8 {
      padding: 8px 0;
    }
    .h44 {
      height: 44px;
      line-height: 44px;
    }
    .abs {
      position: absolute;
      top: 0;
      left: 0;
    }
    .flex-box {
      display: -webkit-box;
      display: -moz-box;
    }
    li {
      position: relative;
      border-bottom: 1px #e4e4e4 solid;
      box-sizing: content-box;
      .name {
        text-align: left;
        font-size: 14px;
        color: #666;
      }
      &:last-child {
        border-bottom: none;
      }
      .showContent {
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        padding-right: 15px;
        text-align: right;
      }
      .week-list {
        .week-btn {
          float: left;
          width: 33%;
          text-align: center;
          margin-bottom: 10px;
          p {
            margin: 0 10px;
            border: 1px #e2e2e2 solid;
            font-size: 14px;
            color: #999;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
          }
          .active {
            background-color: #e2e2e2;
            color: #333;
          }
        }
      }
    }
  }
</style>